// index.vue.hbs
<script setup lang="ts">
import { useReumeStore } from '@/stores/modules/resume'
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
import { ref, toRefs, watchEffect } from 'vue'
import { useDraggable } from 'vue-draggable-plus'
import EditableCard from './EditableCard/index.vue'

const isEditing = ref(false)

const useReume = useReumeStore()
const { entryList } = toRefs(useReume)

function handleEdit(bool: boolean) {
  isEditing.value = bool
}

// 拖拽
const el = ref()
let draggableInstance: any = null

watchEffect(() => {
  if (draggableInstance) {
    draggableInstance.destroy()
  }

  draggableInstance = useDraggable(el, entryList, {
    animation: 150,
    ghostClass: 'ghost',
    disabled: !isEditing.value,
    // onStart() {
    //   console.log('start')
    // },
    // onUpdate() {
    //   console.log('update')
    // },
  })
})

function handCanvas() {
  html2canvas(el.value, { allowTaint: true, scale: 2 }).then((canvas) => {
    const imgWidth = 210 // A4 宽度 (mm)
    const pageHeight = 297 // A4 高度 (mm)
    const pdf = new JsPDF('p', 'mm', 'a4')

    const pageHeightInPixels = (canvas.width * pageHeight) / imgWidth // 单页高度（像素）
    let position = 0 // 当前裁剪位置 (Y轴像素)

    while (position < canvas.height) {
      // 创建一个裁剪 canvas，高度为单页 PDF 对应的像素高度
      const croppedCanvas = document.createElement('canvas')
      const croppedCtx = croppedCanvas.getContext('2d')
      croppedCanvas.width = canvas.width
      croppedCanvas.height = Math.min(pageHeightInPixels, canvas.height - position) // 裁剪剩余高度

      if (!croppedCtx)
        return

      // 裁剪原始 canvas 的一部分内容
      croppedCtx.drawImage(
        canvas, // 原始 canvas
        0,
        position, // 裁剪起始坐标
        canvas.width,
        croppedCanvas.height, // 裁剪区域大小
        0,
        0, // 绘制到裁剪 canvas 的起始位置
        canvas.width,
        croppedCanvas.height, // 绘制区域大小
      )

      // 将裁剪后的 canvas 转为图片添加到 PDF
      const imgData = croppedCanvas.toDataURL('image/png')
      pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, (croppedCanvas.height * imgWidth) / canvas.width)

      position += pageHeightInPixels // 更新 Y 轴位置

      // 添加新页面（除最后一页外）
      if (position < canvas.height) {
        pdf.addPage()
      }
    }

    pdf.save('a4_paginated.pdf') // 保存 PDF 文件
  })
}
</script>

<template>
  <div class="resume-page">
    <h1 class="text-center mb-4">
      简历模板
    </h1>
    <!-- 操作栏 -->
    <div class="w-full flex justify-center">
      <van-button type="warning" size="small" @click="handCanvas">
        生成canvas
      </van-button>
      <van-button
        class="mx-2"
        type="primary"
        size="small"
        @click="handleEdit(false)"
      >
        预览
      </van-button>
      <van-button type="warning" size="small" @click="handleEdit(true)">
        编辑
      </van-button>
    </div>

    <div v-if="entryList" ref="el" class="my-10px mx-auto w-2xl">
      <EditableCard
        v-for="(entry, index) in entryList"
        :key="index"
        v-model="entryList[index]"
        :is-editing="isEditing"
        :is-entry="entry"
      />
    </div>
  </div>
</template>

<style scoped>
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>
